import React, {Component} from 'react';
import {View, Text, StatusBar} from 'react-native';
import {Input} from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
import {colors} from 'react-native-elements';
import validator from "../../../utils/validator";
import request, {login} from "../../../utils/request";
import {ACCOUNT_LOGIN, ACCOUNT_VALIDATEVCODE} from '../../../utils/pathMap';
import THButton from '../../../components/THButton';
import {inject, observer} from 'mobx-react';
import {Toast} from "react-native-toast-notifications";

// 假设 pxToDp 函数用于将像素转换为 DP
const pxToDp = (px) => px * 0.5; // 假设转换系数为 0.5

@inject('RootStore','store')
@observer
export default class Index extends Component {
  //手机号码
  state = {
    phoneNumber: "07421782142",
    // 手机号码是否合法
    phoneValid: true,
    // 是否显示登陆页面
    showLogin: true,
    userId: '',
    password: '',
  }

  constructor(props) {
    super(props);
    console.log('RootState', props.store)
  }

  //登录框手机号码输入
  phoneNumberChangeText = (phoneNumber) => {
    this.setState({phoneNumber});
  }

  passwordChange(password){
    this.setState({ password })
  }

// 对手机验证码的合法性进行校验
// 正确
// 错误 提示
// 将手机的号码发送给后台对应的接口->获取验证码
// 将登陆页面切换成 验证码页面
  phoneNumberSubmitEditing = () => {
    // validator.validatorPhone
    const {phoneNumber} = this.state;
    const phoneValid = validator.validatorPhone(phoneNumber);
    if (!phoneValid) {
      this.setState({phoneValid: false});
      return
    }


    // request.post(ACCOUNT_LOGIN,{phone:phoneNumber});
    // console.log(res);
    // if(res.code=="10000"){
    //     return false;
    // }
    // 存储用户数据到mobx中
    // this.props.RootStore.setUserInfo(phoneNumber, res.data.token, res.data.id);




  }

  toNextPage(res){
    console.log('toNextPage', res.info?.isNew)
    this.props.RootStore.setUserInfo(res.mobile, res.token, res.userId);
    this.props.RootStore.setInfo(res.info || {})
    if (!res.info.isNew){
        // 老用户
        // this.props.navigation.reset({
        //   routes: [{name: 'Tabbar'}],
        // });
      this.props.navigation.navigate('Home');
    }else {
        // 新用户跳转到userinfo页面
        this.props.navigation.navigate('UserInfo');
    }
    // if (res.data.isNew) {
    //   // 新用户跳转到userinfo页面
    //   this.props.navigation.navigate('UserInfo');
    // } else {
    //   // 老用户
    //   this.props.navigation.reset({
    //     routes: [{name: 'Tabbar'}],
    //   });
    // }
  }


  // 点击按钮时执行的函数
  onPressButton = () => {
    console.log('按钮被点击了');
    // 这里可以添加您想要执行的其他操作
  };


  onLogin = () => {
    const { phoneNumber, password} = this.state;
    if (!phoneNumber){
      Toast.show('请输入手机号', { duration: 1500})
      return
    }
    if (!password){
      Toast.show('请输入密码', { duration: 1500})
      return
    }

    login({ phone: phoneNumber, password })
        .then(res=>{
          Toast.show(res.msg, {
            duration: 1500,
          });
          if (res.success){
            this.toNextPage(res.data)
          }
        })

  }


  render() {
    const {phoneNumber, phoneValid, password} = this.state;
    return (
        <View>
          {/* 状态栏 */}
          <StatusBar backgroundColor="transparent" translucent={true}/>
          <Text>Login</Text>
          {/* 显示背景图片 */}
          {/* <Image source={require("../../../res/background.jpg")} /> */}
          <View style={{padding: pxToDp(20)}}>
            <View>
              <View>
                <Text style={{fontSize: pxToDp(25), color: "#888", fontWeight: "bold"}}>Phone Number</Text>
              </View>
              <Input
                  placeholder='请输入手机号'
                  maxLength={11}
                  value={phoneNumber}
                  inputStyle={{color: "#333"}}
                  onChangeText={this.phoneNumberChangeText}
                  errorMessage={phoneValid ? "" : "手机号码不正确"}
                  onSubmitEditing={this.phoneNumberSubmitEditing}
                  leftIcon={<Icon name="compass" color="#ccc" size={pxToDp(20)}/>}
              />
            </View>
          </View>
          <View style={{padding: pxToDp(20)}}>
            <View>
              <View>
                <Text style={{fontSize: pxToDp(25), color: "#888", fontWeight: "bold"}}>Password</Text>
              </View>
              <Input
                  placeholder='请输入密码'
                  maxLength={11}
                  value={password}
                  inputStyle={{color: "#333"}}
                  onChangeText={this.passwordChange.bind(this)}
                  leftIcon={<Icon name="phone" color="#ccc" size={pxToDp(20)}/>}
              />
            </View>
          </View>
          {/* 按钮 */}
          <View style={{width: '50%', height: '100%', alignSelf: "center"}}>

            <THButton onPress={this.onLogin.bind(this)}>
              登录
            </THButton>
          </View>


        </View>
    );
  }
}
